<template>
    <div>
       	<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>签到管理</el-breadcrumb-item>
		</el-breadcrumb>

        <el-card>
			<!-- 搜索添加区 -->
			<el-row :gutter="20">
				<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
					<el-form-item label="用户名">
						<el-input v-model="queryInfo.UserName" placeholder=""></el-input>
					</el-form-item>
                    <el-form-item label="签到时间">
						<el-date-picker
                        v-model="queryInfo.CheckinTimeStats"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"  value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                        </el-date-picker>
					</el-form-item>
                     <el-form-item label="~">
						<el-date-picker
                        v-model="queryInfo.CheckinTimeEnd"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"  value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                        </el-date-picker>
					</el-form-item>
                    <el-form-item label="签到状态">
                    <el-select v-model="queryInfo.CheckState" placeholder="状态">
                        <el-option label="签到" value="签到"></el-option>
                        <el-option label="签退" value="签退"></el-option>
                    </el-select>
                </el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>
				
			</el-row>
			<!--用户列表区  -->
			<el-table :data="roleslist" border stripe>
				<el-table-column label="编号" prop="Id"></el-table-column>
				<el-table-column label="用户名称" prop="UserName"></el-table-column>
                <el-table-column label="签到时间" prop="CheckinTime"></el-table-column>
                <el-table-column label="签退时间" prop="CheckOutTime"></el-table-column>
				 <el-table-column label="操作" >
					<template v-slot="scope">
						<!-- <el-button type="infor"  @click="ClockOut(scope.row.Id)">签退</el-button> -->
						<el-button type="primary"  @click="ClockOut(scope.row.Id)">补签</el-button>
					</template>
        		</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[5, 10, 20, 50]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
		</el-card>
    </div>
</template>
<script>
  export default {
    data() {
      return {
				//获取用户列表的参数对象
				queryInfo: {
					UserName:"",
                    CheckinTimeStats:"",
                    CheckinTimeEnd:"",
                    CheckState:"",
					//当前的页数
				},
				roleslist: [], //table数据
				page: 1,
				//当前每页显示多少条数据
				limit: 10,
				count: 0,
				//控制添加用户对话框的显示与隐藏
				addDialogVisible: false,
				//添加用户的表单数据
				addForm: {
					Name: '',
				},
				//添加表单的验证规则对象
				addFromRules: {
				
				},
				//控制修改用户对话框的显示与隐藏
				editDialogVisible: false,
				//查询到的用户信息对象
				editForm: {},
				// 修改表单的验证规则对象
				editFormRules: {
				},
				//控制分配角色对话框的显示与隐藏
				setRoleDialogVisible: false,
				// 需要被分配角色的用户信息
				userInfo: {},
				//所有角色的数据列表
				roleslist: {},
				//已选中的角色Id值
				selectedRoleId: ''
      }
    },
    created() {
			this.getSinginList()
		},
		methods: {
			async getSinginList() {
				const {
					data: res
				} = await this.$http.get('api/SignIn/GetSiginList?page=' + this.page +
					"&limit=" + this.limit +
					"&UserName=" + this.queryInfo.UserName+ 
                    "&CheckinTimeStats=" + this.queryInfo.CheckinTimeStats+
                    "&CheckinTimeEnd=" + this.queryInfo.CheckinTimeEnd+
                    "&CheckState=" + this.queryInfo.CheckState)
				console.log(res)
				if (res.code !== 0) {
					return this.$message.error('获取用户列表失败')
				}
				this.roleslist = res.data
				this.count = res.count

			},
			onSubmit(){
				this.getSinginList();
			},
			
			// 监听pagesize改变的事件
			handleSizeChange(newSize) {
				//console.log(newSize)
				this.limit = newSize
				this.getSinginList()
			},
			// 监听页码值改变的事件
			handleCurrentChange(newPage) {
				//console.log(newPage)
				this.page = newPage
				this.getSinginList()
			},
			
			
			//监听添加用户对话框关闭事件
			
			async ClockOut(Id) {
				//弹框询问用户是否删除数据
				const confirmResult = await this.$confirm(
					'此操作将给未打卡的用户签退, 是否继续?',
					'提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).catch(err => err)
				//如果用户确认删除，则返回值为字符串 comfirm
				//如果用户取消删除 则返回值为字符串 cancel
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消签退')
				}
				const {
					data: res
				} = await this.$http.get('api/SignIn/ClockOutById?Id=' + Id)
				console.log(res)
				if (res.code !== 0) {
					return this.$message.error(res.msg)
				}
				 this.$message.success('用户签退成功!')
				// this.getUserList()
				this.getSinginList()
			},
			


		},
		mounted: function() {
			this.getSinginList()
		},
		computed:function(){
			
		}

  };
</script>


<style Lang="less" scoped>

</style>